import { defineStore } from "pinia";
import HomeIcon from '~icons/mdi/home-outline';
import TimelineIcon from '~icons/mdi/timeline-clock-outline';
import MenuIcon from '~icons/ep/menu';
import IconParkOutlineFriendsCircle from '~icons/icon-park-outline/friends-circle'; 
import IconParkOutlineTopic from '~icons/icon-park-outline/topic';
import WpfStackOfPhotos from '~icons/wpf/stack-of-photos';
import { useDark, useToggle } from '@vueuse/core'
import { markRaw } from "vue";
import MingcuteToolLine from '~icons/mingcute/tool-line';
const isDark = useDark()
const toggle = useToggle(isDark);

export const useBasicStore = defineStore(
  'basic',
  {
    state: () => ({
      theme: isDark.value,
      menuList: [
        {
          index: 'home',
          icon: markRaw(HomeIcon),
          title: '主页',
          path: '/home'
        },
        {
          index: 'tools',
          title: '工具',
          path: '/tools',
          icon: markRaw(MingcuteToolLine)
          },
        // {
        //   index: '1',
        //   title: '时间轴',
        //   path: '/timeline',
        //   icon: markRaw(TimelineIcon)
        // },
        {
          index: 'album',
          title: '相册',
          path: '/album',
          icon: markRaw(WpfStackOfPhotos)
        },
        {
          index: 'talk',
          title: '说说',
          path: '/talk',
          icon: markRaw(IconParkOutlineTopic)
        },      
        {
          index: 'more',
          title: '更多',
          path: '/more',
          icon: markRaw(MenuIcon),
          children: [
            {
              index: 'about',
              title: '关于',
              path: '/more/about'
            },
          ]
        }
      ],
    }),
    // getters: {
    //   getMenuList() {
    //     return this.menuList;
    //   }
    // },
    actions: {
      toggleDark(){
        toggle();
        this.theme = isDark.value;
      }
    },
  },
  {
    persist: {
      enabled: true,
      strategies: [
        {
          key: 'basic',
          storage: localStorage,
          paths: ['menuList'],
        },
      ],
    }
  }
);